document.addEventListener('DOMContentLoaded', function() {
    // 直接使用 mock 数据，不进行接口请求
    const data = window.mockData.dashboard;
    
    // 更新统计卡片数据
    updateStatCards(data);
    
    // 初始化所有图表
    initAllCharts(data);
});

// 更新统计卡片
function updateStatCards(data) {
    // 使用固定的 mock 数据
    document.querySelector('.comments .value').textContent = '395,000';
    document.querySelector('.visits .value').textContent = '25,450';
    document.querySelector('.users .value').textContent = '13,256';
    document.querySelector('.alerts .value').textContent = '35';
}

// 初始化所有图表
function initAllCharts(data) {
    // 1. 情感分析
    const sentimentChart = echarts.init(document.getElementById('sentimentChart'));
    sentimentChart.setOption({
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'horizontal',
            bottom: 'bottom'
        },
        series: [{
            name: '情感分析',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}: {d}%'
            },
            data: [
                { value: data.sentiment.positive, name: '正面', itemStyle: { color: '#2ecc71' } },
                { value: data.sentiment.neutral, name: '中性', itemStyle: { color: '#f1c40f' } },
                { value: data.sentiment.negative, name: '负面', itemStyle: { color: '#e74c3c' } }
            ]
        }]
    });

    // 2. 地域分布
    const mapChart = echarts.init(document.getElementById('chinaMap'));
    mapChart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>舆情量: {c}'
        },
        visualMap: {
            min: 0,
            max: 30000,
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['#e0f3f8', '#2171b5']
            }
        },
        series: [{
            name: '舆情分布',
            type: 'map',
            map: 'china',
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    areaColor: '#eee'
                }
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#3498db'
                }
            },
            data: data.regions
        }]
    });

    // 3. 热门话题列表
    const topicsContainer = document.querySelector('.topics-list');
    data.topics.forEach((topic, index) => {
        const topicEl = document.createElement('div');
        topicEl.className = 'topic-item';
        topicEl.innerHTML = `
            <div class="rank">${index + 1}</div>
            <div class="topic-content">
                <div class="title">${topic.title}</div>
                <div class="metrics">
                    <span class="pv">热度: ${topic.hot}</span>
                    <span class="percentage">情感: ${topic.sentiment}</span>
                </div>
            </div>
        `;
        topicsContainer.appendChild(topicEl);
    });

    // 4. 关键词云
    const wordChart = echarts.init(document.getElementById('keywordCloud'));
    wordChart.setOption({
        series: [{
            type: 'wordCloud',
            shape: 'circle',
            left: 'center',
            top: 'center',
            width: '90%',
            height: '90%',
            sizeRange: [12, 30],
            rotationRange: [-90, 90],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                color: function () {
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                focus: 'self',
                textStyle: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: data.keywords
        }]
    });

    // 监听窗口大小变化，重绘图表
    window.addEventListener('resize', function() {
        sentimentChart.resize();
        mapChart.resize();
        wordChart.resize();
    });
} 